<template>
  <Container class="order-detail">
    <div slot="header" class="container-header title title-center">退款单号: {{ sn }}
      <Button size="large" class="fl btn-back" icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <Card :bordered="false" dis-hover>
      <div slot="title"><h3>退款单号: {{ sn }} </h3></div>
      <Form>
        <Row>
          <i-col span="12">
            <FormItem label="门店名称:">{{ info.storeName }}</FormItem>
            <FormItem label="退款流水号:">{{ info.refundTxSn }}</FormItem>
            <FormItem label="退款总金额:"><span class="font-red">{{ formatCurrency(info.refundAmount, true) }}</span></FormItem>
            <FormItem label="现金券:"><span class="font-red">{{ formatCurrency(info.cashCouponAmount, true) }}</span></FormItem>
            <FormItem label="授信账户:"><span class="font-red">{{ formatCurrency(info.creditAmount, true) }}</span></FormItem>
            <FormItem label="三方支付:"><span class="font-red">{{ formatCurrency(info.thirdPayAmount, true) }}</span></FormItem>
            <FormItem label="三方支付手续费退款:"><span class="font-red">{{ formatCurrency(info.thirdFee, true) }}</span></FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="订单编号:">{{ info.purchOrderSn }} <a v-if="info.purchOrderSn" @click="onCopy(info.purchOrderSn)">复制</a></FormItem>
            <FormItem label="创建时间:">{{ info.createDate }}</FormItem>
            <FormItem label="支付流水号:">{{ info.sn }}</FormItem>
            <FormItem label="返利:"><span class="font-red">{{ formatCurrency(info.rebateAmount, true) }}</span></FormItem>
            <FormItem label="卖家发放优惠券:"><span class="font-red">{{ formatCurrency(info.actualVoucherCouponAmount, true) }}</span></FormItem>
            <FormItem label="买家领取优惠券:"><span class="font-red">{{ formatCurrency(info.couponAmount, true) }}</span></FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="extra"><h3>状态: <span class="font-red">{{ status }}</span></h3></div>
    </Card>
    <Card class="mt">
      <div slot="title"><h3 class="mr">操作日志</h3></div>
      <Table
        stripe
        :columns="refundColumns"
        :data="refundData"
        no-data-text="亲，没有找到相关记录哦！~"
      />
    </Card>
  </Container>
</template>

<script>
import { formatCurrency } from '@/util'
export default {
  data () {
    return {
      formatCurrency,
      sn: this.$route.query.sn,
      info: {},
      refundColumns: [
        {
          title: '操作项目',
          key: 'item',
          render: (h, params) => {
            let list = {
              'CREATE_REFUND': '生成退款单',
              'REFUND': '确认退款',
              'REFUNDED': '退款成功',
              'REFUND_FAIL': '退款失败',
              'REFUND_RETRY': '重试退款'
            }
            return h('div', list[params.row.operationType])
          }
        },
        { title: '说明', key: 'remark', minWidth: 200 },
        { title: '操作时间', key: 'modifyDate' },
        { title: '操作人', key: 'operator' }
      ],
      refundData: []
    }
  },
  computed: {
    status () {
      const list = {
        'PENDING_REFUND': '待退款',
        'REFUNDING': '退款中',
        'REFUND_FAIL': '退款失败',
        'REFUNDED': '已退款'
      }
      return list[this.info.refundStatus]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$ajaxGet('/order/after_sales_refund/detail', { sn: this.sn }).then(res => {
        this.info = res.purchOrderRefundDTO
        this.refundData = res.purchOrderRefundLogDTOS
      })
    },
    onCopy (text) {
      const input = document.createElement('input')
      input.setAttribute('readonly', 'readonly')
      input.setAttribute('value', text)
      document.body.appendChild(input)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$Message.success('复制成功')
      }
      document.body.removeChild(input)
    }
  }
}
</script>

<style>

</style>
